<template>
  <div class="comments">
    <van-nav-bar
  left-arrow
  @click-left="onClickLeft"
>
<div class="var-title" slot="title">{{count}}</div>
    </van-nav-bar>
<!-- 短评部分 -->
<div v-if="shortComment.length!=0" class="CommentCount">{{shortComment.length + longComment.length}}条短评</div>
<div class="shortComment-box" v-for="item in shortComment" :key="item.id">
  <!-- 短评 -->
  <div class="left">
  <div class="author-img"><img :src="item.avatar" alt=""></div>
  </div>
  <div class="right">
      <div class="flex first">
  <div class="author">{{item.author}}</div>
  <div class="ellipsis">...</div>
      </div>
      <div >
  <div class="content">{{item.content}}</div>
      </div>
      <div class="flex">
  <div class="time">{{item.time}}</div>
  <div class="third flex">
  <div class="like"><van-icon name="good-job-o" size="20" /></div>
  <div class="more"><van-icon name="chat-o" size="20" /></div>
  </div>
  </div>
  </div>
  </div>
<!-- 长评部分 -->
<div v-if="longComment.length!=0" class="CommentCount">{{longComment.length + longComment.length}}条长评</div>
<div class="longComment-box" v-for="item in longComment" :key="item.id">
  <!-- 长评 -->
  <div class="left">
  <div class="author-img"><img :src="item.avatar" alt=""></div>
  </div>
  <div class="right">
      <div class="flex first">
  <div class="author">{{item.author}}</div>
  <div class="ellipsis">...</div>
      </div>
      <div >
  <div class="content">{{item.content}}</div>
      </div>
      <div class="flex">
  <div class="time">{{item.time}}</div>
  <div class="third flex">
  <div class="like"><van-icon name="good-job-o" size="20" /></div>
  <div class="more"><van-icon name="chat-o" size="20" /></div>
  </div>
  </div>
  </div>
  </div>
  <!-- 显示全部评论 -->
  <div class="all">{{count==0?"还没有评论":"已显示全部评论"}}</div>
</div>
</template>

<script>
export default {
name:"Comments",
    data(){
        return{
            storyid:localStorage.getItem("storyid"),
            shortComment:[],
            longComment:[],
            count:0,
        }
    },
    created(){
      this.getShortComment();
      this.getLongComment();
      // console.log(this.count);
    },
    methods:{
      onClickLeft(){
        this.$router.go(-1);
      },
            getShortComment() {
      this.axios({
        method: "GET",
        url: "https://apis.netstart.cn/zhihudaily/story/" + this.storyid +"/short-comments",
      }).then((res) => {
        // console.log(res.data.comments);
        this.shortComment = res.data.comments;
        if(this.shortComment.length == 0) return ;
        for(let i=0; i<this.shortComment.length;i++){
            let str = "";
            var date = new Date(this.shortComment[i].time*1000);
            if(date.getDate() == new Date().getDate()){
              str +='今天';
            }
            else {
              str += this.addZero(date.getMonth()+1);
              str += "-"+this.addZero(date.getDate())+" ";
            }
            str += this.addZero(date.getHours());
            str += ":" + this.addZero(date.getMinutes());
            this.shortComment[i].time = str;
        }
        this.count +=this.shortComment.length;
      })
    },
      getLongComment() {
      this.axios({
        method: "GET",
        url: "https://apis.netstart.cn/zhihudaily/story/" + this.storyid +"/long-comments",
      }).then((res) => {
                // console.log(res.data.comments);
        this.longComment = res.data.comments;
        if(this.longComment.length == 0) return ;
        for(let i=0; i<this.longComment.length;i++){
            let str = "";
            var date = new Date(this.longComment[i].time*1000);
            if(date.getDate() == new Date().getDate()){
              str +='今天';
            }
            else {
              str += this.addZero(date.getMonth()+1);
              str += "-"+this.addZero(date.getDate())+" ";
            }
            str += this.addZero(date.getHours());
            str += ":" + this.addZero(date.getMinutes());
            this.longComment[i].time = str;
        }
                this.count +=this.longComment.length;
      });
    },
    addZero(x){
      if(x<10)
      return "0" + x;
      return x;
    },
    }
}
</script>

<style lang="postcss" scoped>
  .shortComment-box,.longComment-box{
    display: flex;
  }
  .CommentCount{
    margin:10px;
    font-weight: bolder;
    font-size: 15px;
  }
  .left{
    flex: 1;
  }
  .right{
    flex: 9;
        display: flex;
        flex-direction: column;
  }
  .shortComment-box,.longComment-box{
    border-bottom: 1px #eee solid;
    padding: 10px;
  }
  .author-img img{
    width: 30px;
    height:30px;
    border-radius: 50%;
  }
  .flex{
    display: flex;
  }
  .flex{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 10px 0 20px;
  }
  .third{
    margin: 10px;
    width: 80px;
    
  }
  .all{
    margin:30px auto;
    text-align: center;
    color: gray;
    letter-spacing: 0.13rem;
  }
  .var-title::after{
    content: "条评论";
  }
</style>